<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缺陷类型设置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--<link rel="stylesheet" href="/static/component/pear/css/pear.css"/>-->
    <link rel="stylesheet" href="/webjars/layui/2.5.5/css/layui.css"  media="all">
    <style>
        .layui-table-cell{
            height: 30px;
        }
        .zengJiQxMessage{
            margin-left: 20px;
            margin-top: 50px;
        }
        #tableid{
            width: 100%;
            margin-top: 20px;
        }
        .pwling{
            margin-right: 40px;
        }
    </style>
</head>

<body>
    <!--增加缺陷类型-->
    <button type="button" class="layui-btn layui-btn-normal zengJiQxMessage" id="zengJia" onclick="add()"><i class="layui-icon">&#xe608;</i>添加缺陷类型</button>
    <div class="layui-container" id="tableid" style="width:100%;margin-top:50px">
          <table class="" id="test" lay-filter="test"></table>
    </div>
    <script type="text/html" id="active">
                <div class="layui-input-block" style="margin-left: 0px">
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" style="margin-left:20px" lay-event="update" >修改</button>
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="del">删除</button>
                </div>
    </script>
    <script type="text/html" id="active2">
                <div class="layui-input-block" style="margin-left: 0px">
                    <!--value={{d.isStart}} -->
                    <input type="checkbox" lay-skin="switch"  lay-filter="switchTest" value="{{d.id}}" lay-text="已启用|已禁用" {{ d.isStart=="1"?"checked":""}} >
                </div>
    </script>
    <script src="/webjars/layui/2.5.5/layui.js" charset="utf-8"></script>
    <script src="/static/component/pear/pear.js"></script>
    <!--修改信息模块-->
    <script>
        layui.use(['form','layedit','laydate','table'], function(){
            let form =layui.form;
            let table = layui.table;
            let $=layui.$;
            let laydate = layui.laydate;
            laydate.render({
                elem: '#kaishi'
            });
            laydate.render({
                elem: '#jieshu'
            });
            table.render({
                elem: '#test'
                ,url:'/QuXianGuAnLi/qxTypeSheZhiJson'
                ,cols: [
                    [
                         {field:'configValueId',  title: 'ID',sort: true}
                        ,{field:'configName', title: '缺陷名称'}
                        ,{field:'isStart', title: '是否启用',templet:"#active2"}
                        ,{field: '',title:'操作',templet:"#active"}
                    ]
                ]
            })
            //表格监听
            table.on("tool(test)",function ({data,event}) {
                switch (event) {
                    case "update":
                        update(data)
                        break;
                    case "del":
                        del(data.id);
                        break;
                }
            })
            //启用开关监听
            form.on('switch(switchTest)',function(data){
                let articleState = this.checked ? '1' : '0';
                let rowId=data.value;
                $.post("/QuXianGuAnLi/qxZhuAngTaiGai",{"id":rowId,"zhuAngTai":articleState})
                       .done(
                           result=>{
                                         // layer.msg('', {icon: 5});
                                    layer.msg(result.msg,{icon:5})
                                    // layer.close(layer.index);
                                    // table.reload("test")
                     })
                // alert(data.value)
                // console.log(data.elem); //得到checkbox原始DOM对象
                // console.log(data.elem.checked); //开关是否开启，true或者false
                // console.log(data.value); //开关value值，也可以通过data.elem.value得到
                // console.log(data.othis); //得到美化后的DOM对象
            });
            //修改弹窗
            //修改
            function  update(data) {
                layui.use(["jquery","layer","form","table"],function () {
                    let layer=layui.layer;
                    let $=layui.$;
                    let table=layui.table;
                    // let popup = layui.popup;
                    // console.log("你是个啥？？")
                    // $("#biao1")[0].reset();
                    layui.form.val("updateform",data)
                     layer.open({
                        type:1,
                        content:$("#updatemk"),//divID
                        area:["400px","260px"],
                        btn:["确定","取消"],
                        title:"修改信息",
                        // success:function(layero){
                        //     let mask = $(".layui-layer-shade");
                        //     mask.appendTo(layero.parent());
                        //     //其中：layero是弹层的DOM对象
                        // },
                        yes(){
                                let parms=  layui.form.val("updateform")  //拿到表单元素
                            console.log(parms+"aaa")
                            $.post("/QuXianGuAnLi/qxTypeUpdate",parms,function (c) {
                              if(c.msg=="信息更新成功"){
                                  table.reload("test")
                                  // popup.success("成功消息",callback)
                                  layer.closeAll('page'); //关闭所有页面层
                              }else {
                                  // alert("失败")
                                  // popup.failure("失败消息",callback)
                              }
                            })
                                //    .done(
                                //              result=>{
                                //                      // layer.msg('', {icon: 5});
                                //                       layer.msg(result)
                                // })
                                // .done(({msg})=>{
                                //     // layer.msg(msg)
                                //     console.log(msg+"aaaaa");
                                //     layer.close(layer.index);
                                //     table.reload("test")
                                // });
                            //弱类型结构
                            // let obj={};
                            // obj.roleCode=$("#a1").val();
                        },
                    });
                });
            }


        });
        function add() {
            layui.use(["jquery","layer","form","table",'popup'],function () {
                let layer=layui.layer;
                let $=layui.$;
                let table=layui.table;
                let popup = layui.popup;
                layer.open({
                    type:1,
                    content:$("#addmk"),//divID
                    area:["500px","350px"],
                    btn:["确定","取消"],
                    title:"增加缺陷信息",
                    yes(){
                        let parms= layui.form.val("addform")  //拿到表单元素
                        console.log(parms);
                        // alert(parms+"信息")
                        $.post("/QuXianGuAnLi/quXianAdd",parms,function (c) {
                            layer.close(layer.index);
                            if(c.msg=="成功"){
                                table.reload("test")
                                popup.success("增加成功")
                                // alert("成功")
                            }else {

                            }
                        })
                    },
                });
            });
             alert("增加")
        }
        //删除
        function del(c) {
            layui.use(["jquery","layer","form","table",'popup'],function () {
                let $=layui.$;
                let table=layui.table;
                let popup = layui.popup;
                $.post("/QuXianGuAnLi/quxShanCHu",{id:c},
                    function (c) {
                        if(c.msg=="成功"){
                            table.reload("test")
                            popup.success("删除成功")
                            // alert("成功")
                        }else {
                            popup.success("删除失败")
                        }
                    })
                });
        }
    </script>

</body>
</html>
<!--修改-->
<div id="updatemk" style="display: none;margin: auto auto" class="aa">
    <form class="layui-form" lay-filter="updateform" action="" style="padding: 50px" id="biao1">
        <input  type="hidden" name="id"/>
        <div class="layui-form-item" style="margin-right: 30px">
            <label class="layui-form-label">缺陷类型:</label>
            <div class="layui-input-block">
                <input id="a" type="text" name="configName" required  lay-verify="required" placeholder="请输入缺陷类型" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</div>
<!--增加-->
<div id="addmk" style="display: none;margin: auto auto" class="aa">
    <form class="layui-form" lay-filter="addform" action="" style="padding: 40px" id="biao2">
        <div class="layui-form-item pwling layui-lin" style="">
            <label class="layui-form-label">缺陷编码:</label>
            <div class="layui-input-block" style="margin-bottom: 20px">
                <input id="ac2" type="text" name="configCode" required  lay-verify="required" placeholder="请输入缺陷类型编码" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">缺陷名称:</label>
            <div class="layui-input-block" style="margin-bottom: 20px">
                <input id="ac1" type="text" name="configName" required  lay-verify="required" placeholder="请输入缺陷类型" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">缺陷状态:</label>
            <div class="layui-input-block" style="margin-left: 0px">
                <input type="checkbox" lay-skin="switch"  lay-filter="switchTestee"  lay-text="已启用|已禁用" name="isStart">
            </div>
        </div>
    </form>
</div>